<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="请输入助记名" size="small" v-model="like1" style="width: 260px;">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <div style="height: 30px;">
          </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addTaoCan">新增</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="findOrder().slice((pageNum-1)*pageSize,pageNum*pageSize)" border size="mini" header-cell-class-name="header-row">
            <el-table-column prop="id" label="套餐编号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="tname" label="套餐名称" header-align="center" align="center" width="200"></el-table-column>
            <el-table-column prop="helpCode" label="助记名" header-align="center" align="center"></el-table-column>
            <el-table-column prop="sex" label="适用性别" header-align="center" align="center"></el-table-column>
            <el-table-column prop="maxage" label="适用年龄下限" header-align="center" align="center"></el-table-column>
            <el-table-column prop="minage" label="适用年龄上限" header-align="center" align="center"></el-table-column>
            <el-table-column prop="price" label="套餐价格" header-align="center" align="center"></el-table-column>
            <el-table-column prop="costPrice" label="套餐成本" header-align="center" align="center"></el-table-column>
            <el-table-column prop="setStatue" label="套餐状态" header-align="center" align="center"></el-table-column>
            <el-table-column label="状态" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-switch
                :value="scope.row.setStatue"
                active-value="启用"
                inactive-value="禁用"
                active-text="启用"
                inactive-text="禁用"
                @change="Kgtaocan(scope.row)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="100">
              <template slot-scope="scope">
                <el-button type="primary" size="mini"
                  @click="xgtaocan(scope.row)">修改</el-button>
              </template>
            </el-table-column>
        </el-table>
        </el-col>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="findOrder().length">
          </el-pagination>
          <el-dialog :title="title" :visible.sync="dialogTransferVisible">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="套餐信息" name="first">
                <el-form :model="TaoCans" :rules="rules" ref="TaoCans" label-position="right" size="small">

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item label="套餐名称" prop="tname">
                        <el-input placeholder="套餐名称" size="small" v-model="TaoCans.tname" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="helpCode" label="助记名">
                        <el-input placeholder="助记名" size="small" v-model="TaoCans.helpCode" style="width: 255px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="sex" label="适应性别">
                        <el-radio-group v-model="TaoCans.sex" size="small">
                          <el-radio-button label="通用" value="0"></el-radio-button>
                          <el-radio-button label="男" value="1"></el-radio-button>
                          <el-radio-button label="女" value="2"></el-radio-button>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="clinicId" label="归属科室">
                        <el-select  v-model="TaoCans.clinicId">
                          <el-option
                            v-for="item in this.clinicList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="minage" label="年龄下线">
                        <el-input placeholder="年龄下线" size="small" v-model="TaoCans.minage" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="maxage" label="年龄上线">
                        <el-input placeholder="年龄上线" size="small" v-model="TaoCans.maxage" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="price" label="套餐价格">
                        <el-input placeholder="套餐价格" size="small" v-model="TaoCans.price" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="costPrice" label="套餐成本">
                        <el-input placeholder="套餐成本" size="small" v-model="TaoCans.costPrice" style="width: 235px;"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item>
                    <el-col :span="11">
                      <el-form-item prop="updatetine" label="修改时间">
                        <el-input size="small"  v-model="TaoCans.updatetine" style="width: 232px;" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="11">
                      <el-form-item prop="createtime" label="创建时间">
                        <el-input size="small"  v-model="TaoCans.createtime" style="width: 232px;" :disabled="true"/>
                      </el-form-item>
                    </el-col>
                  </el-form-item>

                  <el-form-item label="套餐介绍" prop="remark">
                    <el-input
                    style="width: 630px;"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入套餐介绍"
                    v-model="TaoCans.remark">
                  </el-input>
                  </el-form-item>

                  <el-form-item label="注意事项" prop="attention">
                    <el-input
                      style="width: 630px;"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入套餐注意事项"
                      v-model="TaoCans.attention">
                    </el-input>
                  </el-form-item>

                  <el-form-item label="套餐图片" prop="img">
                    <!-- <el-upload
                    style="width: 232px;"
                      size="mini"
                      class="upload-demo"
                      drag
                      action=""
                      :on-change="getImg"
                      multiple>
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload> -->

                    <el-upload
                      class="upload-demo"
                      ref="upload"
                      name="file"
                      action="http://127.0.0.1:8085/tpsc/uploadImage"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :on-success="handleSuccess"
                      :on-error="handleError"
                      :auto-upload="false">
                      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>

                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="项目选择" name="second">
                <el-form  label-width="400px" label-position="right" size="small">
                   <el-transfer
                    filterable
                    :filter-method="filterMethod"
                    filter-placeholder="请输入检查项名称"
                    v-model="value"
                    :data="tcs"
                    @change="getTaoCan"
                    :right-default-checked='tcids'>
                  </el-transfer>
                </el-form>
              </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="qd('TaoCans')">确 定</el-button>
              <el-button @click="resetForm('TaoCans')">重置</el-button>
            </div>
          </el-dialog>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { listAllTaoCan,updStatue,addSetmeal,queryItem} from '@/api/xsxsetmeal'
import { queryCheckitemStatus} from '@/api/xsxcheckitem'
import { listAllClinic} from '@/api/xsxclinic'



export default {
  data() {
      return {
        clinicList:{},
        tcids:[],
        changeTaocan:[],
        tcs:[],
        value: [],
        dialogTransferVisible:false,
        taocanList:[],
        loading: false,
        like1:'',
        pageSize:4,//每页显示的条数
        pageNum:1,
        title:"添加套餐",
        activeName:'first',
        TaoCans:{},
        checkitemList:[],
        rules: {
          tname: [
            { required: true, message: '请输入套餐名称', trigger: 'blur' },
            { min: 2, message: '长度在 2 个字符以上', trigger: 'blur' }
          ],
          helpCode: [
            {required: true, message: '请输入助记名', trigger: 'blur' }
          ],
          sex: [
            {required: true, message: '请选择适用性别', trigger: 'change' }
          ],
          clinicId: [
            {required: true, message: '请选择归属科室', trigger: 'change' }
          ],
          minage: [
            { required: true, message: '请输入年龄下线', trigger: 'blur' }
          ],
          maxage: [
            { required: true, message: '请输入年龄上线', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入套餐价格', trigger: 'blur' }
          ],
          costPrice: [
            { required: true, message: '请输入套餐成本', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入套餐编号', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入套餐介绍', trigger: 'blur' }
          ],
          attention: [
            { required: true, message: '请输入套餐注意事项', trigger: 'blur' }
          ]
        },
      };
  },
  methods: {
    handleSuccess(res, file){
      this.$message({
        type: "info",
        message: "图片上传成功",
        duration: 6000,
      });
      this.TaoCans.img=res;
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file.name,fileList+""+2);
    },
    handleError(file, fileList){
      this.$message({
        type: "error",
        message: "图片上传失败",
        duration: 6000,
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSizeChange(val) {
     this.pageSize = val;
    },
    async pageInit() {
      try {
        let [tc,jcx,jzbm] = await Promise.all([
          listAllTaoCan(),
          queryCheckitemStatus(),
          listAllClinic()
        ])
        this.taocanList=tc.data
        this.checkitemList=jcx.data
        this.clinicList=jzbm.data
        this.tcs=[]
        for(var i=0;i<this.checkitemList.length;i++){
          this.tcs.push({
            label: this.checkitemList[i].name,
            key: this.checkitemList[i].id
          });
        }
      } catch(error) {
        this.outputError(error)
      }
    },
    findOrder(){
        return this.taocanList.filter((item,i)=>{
            if(item.helpCode.includes(this.like1)){
                return item;
            }
        })
    },
    xgtaocan(row){
      this.dialogTransferVisible=true;
      this.title="修改套餐";
      this.value=[];
      this.TaoCans=row
      queryItem(row.id).then(response => {
        for(var i=0;i<response.data.length;i++){
          this.value.push(response.data[i].checkitemId);
        }
      })
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      if(mon<10){
        mon="0"+mon;
      }
      var date = myDate.getDate(); //获取当前日
      if(date<10){
        date="0"+date;
      }
      var h = myDate.getHours();//获取当前小时数(0-23)
      if(h<10){
        h="0"+h;
      }
      var m = myDate.getMinutes();//获取当前分钟数(0-59)
      if(m<10){
        m="0"+m;
      }
      var s = myDate.getSeconds();//获取当前秒
      if(s<10){
        s="0"+s;
      }
      this.TaoCans.updatetine=year+"-"+mon+"-"+date+" "+h+":"+m+":"+s
      this.TaoCans.id=row.id
    },
    Kgtaocan(row){
       this.$confirm('是否确定继续此操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(row.setStatue=='启用'){
            updStatue(0,row.id).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }else{
            updStatue(1,row.id).then(response => {
              if(response.data>0){
                this.pageInit()
              }
            })
          }
          this.$message({
              type: 'success',
              message: '操作成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    addTaoCan(){
      this.dialogTransferVisible=true;
      this.TaoCans={
          id:'0',
          tname:'',
          code:'',
          helpCode:'',
          sex:'',
          maxage:'',
          minage:'',
          price:'',
          remark:'',
          attention:'',
          img:'',
          createtime:'',
          updatetine:'',
          costPrice:'',
          setStatue:'启用',
          clinicId:''
        }
      this.value=[]
      this.title="添加套餐";
      var myDate = new Date;
      var year = myDate.getFullYear(); //获取当前年
      var mon = myDate.getMonth() + 1; //获取当前月
      if(mon<10){
        mon="0"+mon;
      }
      var date = myDate.getDate(); //获取当前日
      if(date<10){
        date="0"+date;
      }
      var h = myDate.getHours();//获取当前小时数(0-23)
      if(h<10){
        h="0"+h;
      }
      var m = myDate.getMinutes();//获取当前分钟数(0-59)
      if(m<10){
        m="0"+m;
      }
      var s = myDate.getSeconds();//获取当前秒
      if(s<10){
        s="0"+s;
      }
      this.TaoCans.createtime=year+"-"+mon+"-"+date+" "+h+":"+m+":"+s
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    filterMethod(query, item) {
      return item.label.indexOf(query) > -1;
    },
    getTaoCan(a){
      this.changeTaocan=a;
    },
    qd(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
            alert('您确定要继续此操作!');
            if(this.TaoCans.img==''){
            alert("未上传图片,请先上传图片再提交！！！")
              return;
            }
            if(this.changeTaocan.length==0){
              alert("未选择检查项,请选择检查项再提交！！！")
              return;
            }

          } else {
            console.log('error submit!!');
            return false;
          }
      });
      let taocan=JSON.stringify(this.TaoCans);
      let ietms=JSON.stringify(this.changeTaocan);
      addSetmeal(ietms,taocan).then(response => {
        if(response.data>0){
          this.dialogTransferVisible=false;
          this.pageInit()
        }
      })
    },
    // getImg(file, fileList){
    //   this.TaoCans.img=file.name
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.pageInit()
  }
}
</script>
